<template>
	<view class="empty-container h-full flex-column">
		<view class="title w-full">请选择车牌号</view>
		<view class="flex-column align-center empty-car">
			<view class="flex align-center flex-1">
				<view class="flex-column align-center">
					<image src="@/static/my/empty-car.png"></image>
					<text class="tips mt-10">您还没有绑定车辆，快去绑定吧～</text>
				</view>
			</view>
			<view class="buttom-footer flex-start w-full">
				<view  @click="handleAdd()" class="buttom-primary-style-plain add flex-center align-center">
					<u-icon name="plus-circle-fill" size="35"></u-icon>
					<text class="ml-10">新增车辆绑定</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			handleAdd() {
			this.$emit("handleAdd")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.empty-container {
		padding: 30rpx 30rpx 0 30rpx;
		.title {
			font-family: PingFang SC;
			font-size: 36rpx;
			font-weight: 500;
			line-height: 50rpx;
			text-align: left;
		}

		image {
			width: 170rpx;
			height: 169rpx;
		}

		.tips {
			font-family: PingFang SC;
			font-size: 26rpx;
			font-weight: 400;
			color: #919EB5;
		}
	}

	.empty-car {
		height: calc(100% - 80rpx);
		.buttom-footer {
			height: 100rpx;
			.add {
				height: 86rpx;
			}
		}
	}
</style>